<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
//Показать управление страницами и активировать первую ссылку
        $(".paging").show();
        $(".paging a:first").addClass("active");
//Взять размер изображения, кол-во изображений, и далее определить размер "холста".
        var imageWidth = $(".window").width();
        var imageSum = $(".image_reel img").size();
        var imageReelWidth = imageWidth * imageSum;
//Подстроить размер "холста" под новый размер
        $(".image_reel").css({'width' : imageReelWidth});
        //Функции
        rotate = function(){
            var triggerID = $active.attr("rel") - 1; //Взять количество раз для прокрутки
            var image_reelPosition = triggerID * imageWidth; //Определить дистанцию для прокрутки

            $(".paging a").removeClass('active'); //Убрать все классы active
            $active.addClass('active'); //Добавить класс active

            //Анимация слайдера
            $(".image_reel").animate({
                left: -image_reelPosition
            }, 500 );

        };
//Вращение и заддержка
        rotateSwitch = function(){
            play = setInterval(function(){ //Задать таймер
                $active = $('.paging a.active').next();
                if ( $active.length === 0) {
                    $active = $('.paging a:first'); //после последней - обратно на первую
                }
                rotate();
            }, 3000); //Время для прокрутки (7 секунд)
        };

        rotateSwitch();

        //При наведении НАДО??????????????
        $(".image_reel a").hover(function() {
            clearInterval(play); //прекратить смену слайдов
        }, function() {
            rotateSwitch(); //продолжить
        });
//При нажатии
        $(".paging a").click(function() {
            $active = $(this);
//Сброс таймера
            clearInterval(play); //Прекратить смену слайдов
            rotateSwitch(); // Продожить
            rotate(); //Вызвать немедленно смену
            return false;
        });
    });
</script>
    <style>
            /*--Главный контейнер--*/
        .main_view {
            float: left;
            position: relative;
        }
            /*--Window/Masking Стили--*/
        .window {
            height:250px;	width: 565px;
            overflow: hidden; /*--Прячет все за пределами width/height--*/
            position: relative;
        }
        .image_reel {
            position: absolute;
            top: 0; left: 0;
        }
        .image_reel img {float: left;}
            /*--Paging Стили--*/
        .paging {
            position: absolute;
            bottom: 40px;
            width: 178px; height:7px;
            z-index: 100; /*--кнопки смены слайдов поверх изображения--*/
            text-align: center;
            line-height: 40px;
            display: none; /*--Спрятано по умолчанию, потом будет показано с помощью jQuery--*/
        }
        .paging a {
            margin-left: 10px;
            padding: 3px 9px 3px 9px;
            text-decoration: none;
            color: #fff;
            background-color: #ffe347;
        }
        .paging a.active {
            font-weight: bold;
            background: #920000;
            border: 1px solid #610000;
            -moz-border-radius: 3px;
            -khtml-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
        .paging a:hover {font-weight: bold;}
    </style>
</head>
<body>

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="rel_1.jpg" alt="" /></a>
            <a href="#"><img src="rel_2.jpg" alt="" /></a>
            <a href="#"><img src="rel_3.jpg" alt="" /></a>
            <a href="#"><img src="rel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

</body>
</html>


<div class="jcarousel-skin-tango">
    <div class="jcarousel-container jcarousel-container-horizontal">
        <div class="jcarousel-clip jcarousel-clip-horizontal">

            <ul id="mycarousel" class="jcarusel_ul">

                <li jcarouselindex="1" class="jcarousel-item jcarousel_h">
                    <a href="#"><img src="static_circular_files/1.png"></a>
                </li>

                <li jcarouselindex="2" class="jcarousel-item jcarousel_h">
                    <a href="#"><img src="static_circular_files/2.png"></a>
                </li>

                <li jcarouselindex="3" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/3.png"></a>
                </li>

                <li jcarouselindex="4" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/4.png"></a>
                </li>

                <li jcarouselindex="5" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/5.png"></a>
                </li>

                <li jcarouselindex="6" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/6.png"></a>
                </li>

                <li jcarouselindex="7" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/7.png"></a>
                </li>

                <li jcarouselindex="8" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/8.png"></a>
                </li>

                <li jcarouselindex="9" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/9.png"></a>
                </li>

                <li jcarouselindex="10" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/10.png"></a>
                </li>

                <li jcarouselindex="9" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/11.png"></a>
                </li>

                <li jcarouselindex="10" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/12.png"></a>
                </li>

                <li jcarouselindex="1" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/1.png"></a>
                </li>

                <li jcarouselindex="2" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/2.png"></a>
                </li>

                <li jcarouselindex="3" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/3.png"></a>
                </li>

                <li jcarouselindex="4" class="jcarousel-item jcarousel_h">
                    <a href=""><img src="static_circular_files/4.png"></a>
                </li>

            </ul>
        </div>
        <div disabled="false" class="jcarousel-prev jcarousel-prev-horizontal"></div>
        <div disabled="false" class="jcarousel-next jcarousel-next-horizontal"></div>
    </div>
</div>